<template>
  <div v-show="isOpen" class="cut-image-dialog">
    <div class="dialog">
      <div class="container">
        <div class="title">
          <span class="font-weight-500 font-size-18 line-height-150">{{ $t('dialog.cutImage.title') }}</span>
        </div>
        <div ref="elementRef"></div>
        <div class="btns gap-row-8 flex-row">
          <button class="cancel cancel-btn bg-gray-x" @click="closeImageCutDialog">
            {{ $t('common.cancel') }}
          </button>
          <button class="confirm primary-btn" @click="onCut">
            {{ $t('common.confirm') }}
          </button>
        </div>
      </div>
      <div class="close">
        <Icon class="pointer" name="close" size="20" @click="closeImageCutDialog"></Icon>
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/store/app'
import { useImageCutStore } from '@/store/cut-image'
import useCroppie from '@/compositions/plugin/croppie'
import { DESKTOP_FONT_SIZE_SCALE } from '@/constant/config'

const imageCutStore = useImageCutStore()
const { close: closeImageCutDialog, onImageCut } = imageCutStore
const { file, isOpen } = storeToRefs(imageCutStore)

const DEFAULT_IMAGE_SIZE = 248
const { isMobile } = storeToRefs(useAppStore())
const sizeRef = computed(() => (isMobile.value ? DEFAULT_IMAGE_SIZE : DEFAULT_IMAGE_SIZE * DESKTOP_FONT_SIZE_SCALE))

const elementRef = ref(null)
const urlRef = computed(() => file.value && URL.createObjectURL(file.value))

const { init, cut, destory } = useCroppie({ elementRef, sizeRef, urlRef })

const onCut = async () => {
  const result = await cut()
  onImageCut(result)
}

onMounted(init)
onUnmounted(destory)
</script>
<style scoped lang="scss">
.cut-image-dialog {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;

  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 2999;
}

.dialog {
  width: 75%;
  max-width: 17.5rem;
  padding: 0.75rem 1rem 1rem;
  border-radius: 0.625rem;
  position: relative;

  background-color: rgb(var(--v-theme-surface));
}

.title {
  margin-bottom: 1rem;
  position: relative;
  width: 100%;

  display: flex;
  justify-content: center;
}

.close {
  width: 1.25rem;
  height: 1.25rem;

  position: absolute;
  top: 1rem;
  right: 0.75rem;

  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.btns {
  display: flex;
  .confirm,
  .cancel {
    flex-grow: 1;
    min-width: 7.75rem;

    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

// Croppie Viewport Circle 的外框樣式
::v-deep(.cr-vp-circle) {
  border: none;
}

// Zoom-in, Zoom-out Slider 外框樣式
::v-deep(.cr-slider-wrap) {
  width: 100%;
}

// Zoom-in, Zoom-out Slider 樣式
::v-deep(input[type='range']) {
  &::-webkit-slider-thumb {
    background: #ffffff;
    width: 0.875rem;
    height: 0.875rem;
  }

  &::-moz-range-thumb {
    background: #ffffff;
    width: 0.875rem;
    height: 0.875rem;
  }

  &::-webkit-slider-runnable-track {
    background: rgb(var(--v-theme-graydisabled), 0.4);
  }

  &::-moz-range-track {
    background: rgb(var(--v-theme-graydisabled), 0.4);
  }
}
</style>
